<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			 <link rel="stylesheet" href="jquery-ui-1.10.4.custom.min.css">
 
		 <script type="text/javascript" src="../jQuery-2.1.4.min.js" ></script>
   <script src="../dom/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>

		
 <!--
 
  <script src="../dom/jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
	
	 <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
 -->
 <!-- 
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  -->
  <!--
  <link rel="stylesheet" href="jqueryui/style.css">
  -->
	
	
	</head>
	 
	
	<style>
		body{
			width: 100%;
			height: 100%;
		}
		.xx{
			width: 900;
			height: 200px;
			background-color: #ccc;
			padding: 30px;
			margin: 30px;
			border: 2px solid red;
			/*overflow: hidden;*/
		}
		.subxx{
			width: 180px;
			height: 100%;
			background-color: #007FFF;
			float: left;
			border: 1px solid royalblue;
			margin:2px;
			/*z-index: 99;*/
		}
		.subxx2{
			width: 180px;
			height: 100%;
			background-color: green;
			float: left;
			border: 1px solid royalblue;
			margin: 2px;
			/*z-index: 99;*/
		}
		.subxx,.subxx2{
		border: 2px solid aquamarine;
	}
	</style>
	<body>
			<!--
			<div class="subxx2 ui-sortable-placeholder" style="visibility: hidden; width: 294px;"></div>
		-->
		<div id="test11"  class="xx zz" >
			<div id="a1" class="subxx box">11111</div>
			<div id="a2" class="subxx box">22222</div> 
		
		</div>
		<!--
			<div id="a3" class="subxx2 box ui-resizable ui-sortable-helper" style="width: 442px; height: 200px; position: absolute; z-index: 1000; left: 75px; top: 165px;">3333333<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div>
			-->
			<!--
			<div id="a3" class="subxx2 box ui-resizable ui-sortable-helper" style="width: 442px; height: 200px; position: absolute; z-index: 1000; left: 68px; top: 120px;">3333333<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div></div>
			-->
		<div id="test22"  class="xx zz">
			<div id="a3"  class="subxx2 box">3333333</div>
			<div id="a4" class="subxx2 box">4444</div>
		</div>
		<div id="test33"  class="xx zz" style="height: 120px;">
			
			
		</div> 
		<script>
   
    function test1(){
    	var overBox;
    	var arr = [];
    	$( ".xx" ).sortable({
    		containment:'body',
    	  	connectWith: ".xx",
//  	  	placeholder: "ui-state-highlight"//站位符样式
//  	  	dropOnEmpty: false,//可被放置空列表中
			create: function( event, ui ) {
				//创建n个盒子.
//    			console.log("create---1")
//    			console.log($(this).attr("id"))
      		},
	    	start:function(event,ui){
//				startBoxId = $(this).attr("id"); 
//				console.log(startBoxId)
//				console.log("start-2")
//				console.log($(this).attr("id"))
	      	},
	      	activate: function( event, ui ) {
      			//激活所有的盒子
//    			console.log("activate-3")
//				console.log($(this).attr("id"))
      		},
      		sort: function( event, ui ) {
      			//拖拽过程中，被拖拽的盒子
//    			console.log("sort-4") 
//    			console.log($(this).attr("id"))
      		},
      		change: function( event, ui ) {
//    			改变的盒子
      			console.log("change-4.1")
      			console.log($(this).attr("id")) 
//    			autoWidth($(this));
      				console.log($(this).html())
      		},
	      	over:function(event, ui){
	      		//拖进另一个盒子时
		       	overBox = $(this);
//		       	console.log("--------------------------")
//		      	console.log($(this).attr("id"))//进入的盒子
//		      	 console.log($(this).html())
//		      	  console.log($(this).children().length)
		      	$(this).children().each(function(i,ele){
		      		var tt = $(ele).attr("id")
		      		console.log(tt)
		      	});
				arr.push($(this).attr("id"))
				console.log("over-4.2")
				console.log($(this).attr("id"))
				autoWidth($(this));
				
				var w = avgWidth($(this));
				ui.item.width(w);
//				console.log(ui.helper.attr("id"))
//				console.log(ui.item.attr("id"))
				
				
				
//					console.log($(this).html())
		    },
		    
      		beforeStop: function( event, ui ) {
//    			在xx之前停止 ，100%,被拖拽的盒子。调用一次
      			console.log("beforeStop-5") 
      			console.log($(this).attr("id"))
//    			console.log($(this).html()) 
      		},
      		
      		
      		
      		out: function( event, ui ) {
//    			增加元素的盒子
      			console.log("out-4.3")
      			console.log($(this).attr("id"))
//    			console.log($(this).html())
      		},
      		receive: function( event, ui ) {
      			console.log("receive")
      			console.log($(this).attr("id"))
      		},
      		remove: function( event, ui ) {
      			console.log("remove")
      			console.log($(this).attr("id"))
      		},
      		
      		update: function( event, ui ) { 
//    			autoWidth($(this));
      			console.log("update")
      			console.log($(this).attr("id"))
//    			console.log($(this).html())
		
      		},
      		deactivate: function( event, ui ) {
      			//停止之前关闭所有盒子.增加元素的盒子后调用out传入增加元素的盒子
//    			console.log("deactivate-6")
//    			console.log($(this).attr("id"))
//    			console.log($(this).html())
      		},
      		stop:function(event,ui){//停止 
      			autoWidth($(this));
      			autoWidth(overBox);
				console.log("stop")
				console.log(arr)
				console.log($(this).attr("id"))
      		}
    	}).disableSelection();//被拖拽元素 
    	
    	/*   $( ".zz" ).resizable({ 
    	   
		//    containment: "#container"
		    });
 	*/

    }
    

    
			$(function(){
				test1();
//				rr();
				autoWidth($("#test11")); 
				autoWidth($("#test22")); 

			});
			
			function sumNum (ml,mr,pl,pr,bl,br){
				return toNum(ml)+toNum(mr)+toNum(pl)+toNum(pr)+toNum(bl)+toNum(br);
			}
			function toNum(str){
				var num = str.substring(0,str.indexOf("px"))
				return parseInt(num);
			}
			
			
function getOtherWidth(doc){
	var num = 0;
	$(doc).children().each(function(i,ele){
		var ml = $(ele).css("margin-left");
		var mr = $(ele).css("margin-right");
		var pl = $(ele).css("padding-left");
		var pr = $(ele).css("padding-right");
		var bl = $(ele).css("border-left-width");
		var br = $(ele).css("border-right-width");
		num += sumNum(ml,mr,pl,pr,bl,br);
	});
	return num;
}//
			
	function avgWidth(doc){
				var w = $(doc).width();
				var n = $(doc).children().length;
				var num = 0;
				$(doc).children().each(function(i,ele){
					var ml = $(ele).css("margin-left");
					var mr = $(ele).css("margin-right");
					var pl = $(ele).css("padding-left");
					var pr = $(ele).css("padding-right");
					var bl = $(ele).css("border-left-width");
					var br = $(ele).css("border-right-width");
					num += sumNum(ml,mr,pl,pr,bl,br);
				});
				var subw = (w-num)/n;
				return subw;
			}//			
			
			function autoWidth(doc){
				var w = $(doc).width();
				var n = $(doc).children().length;
				var num = 0;
				$(doc).children().each(function(i,ele){
					var ml = $(ele).css("margin-left");
					var mr = $(ele).css("margin-right");
					var pl = $(ele).css("padding-left");
					var pr = $(ele).css("padding-right");
					var bl = $(ele).css("border-left-width");
					var br = $(ele).css("border-right-width");
					num += sumNum(ml,mr,pl,pr,bl,br);
				});
				var subw = (w-num)/n;
				$(doc).children().width(subw);
//				$(doc).children().animate({width:subw+'px'},'slow');
			}//
			
			
//				$('.xx').bind('DOMNodeInserted', function(e) {
			
		</script>
	</body>
</html>
